import React, { Component } from 'react'
import {Card, Button, Select, Input, Table, Tag, message} from 'antd'
import {PlusCircleOutlined, SearchOutlined} from'@ant-design/icons'
import {reqProductList} from '../../api/index'
export default class Product extends Component {
  componentDidMount() {
    this.getProductList()
  }
  state = {
    productList: [],
    queryInfo: {pageNum: 1, pageSize: 5}
  }
  getProductList = async() => {
    const {pageNum, pageSize} = this.state
    let res = await reqProductList(pageNum, pageSize)
    console.log('getProducts', res)
    res = res.data
    if (res.status !== 0) {
      return message.error(res.msg)
    }
    this.setState({productList: res.data.list})
  }
  render() {
    const dataSource = [
      {
        key: '1',
        name: '胡彦斌',
        price: 32,
        desc: '西湖区湖底公园1号',
        status: 0
      },
      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },
      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },      {
        key: '2',
        name: '胡彦祖',
        price: 42,
        desc: '西湖区湖底公园1号',
        status: 1
      },
    ];

    const columns = [
      {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
        width: '18%'
      },
      {
        title: '商品描述',
        dataIndex: 'desc',
        key: 'desc',
      },
      {
        title: '价格',
        dataIndex: 'price',
        key: 'price',
        width: '9%',
        render: price =>  '￥'+price
      },
      {
        title: '状态',
        dataIndex: 'status',
        render: (status) => {
          if (status === 0) {
            return (
              <div>
                <Button type="primary" size="mini">
                  下架
                </Button>
                <Tag color='geekblue' style={{width: '64px', height: '32px', lineHeight: '32px', textAlign: 'center', fontSize: '14px', marginTop: '5px'}}>
                  在 售
                </Tag>
              </div>
            )
          } else {
            return (
              <div>
                <Button type="primary" size="mini">
                  上 架
                </Button>
                <br/>
                <Tag color='green' style={{width: '64px', height: '32px', lineHeight: '32px', textAlign: 'center', fontSize: '14px', marginTop: '5px'}}>
                  停 售
                </Tag>
              </div>
            )
          }
        },
        width: '5%'
      },
      {
        title: '操作',
        dataIndex: 'operation',
        render: () => {
          return (
            <div>
              <Button type="link">详情</Button>
              <Button type="link">修改</Button>
            </div>
          )
        },
        width: '15%'
      },
    ];
    return (
      <div>
        <Card
         title={
          <div>
            <Select defaultValue="name">
              <Select.Option value="name">按名称搜索</Select.Option>
              <Select.Option value="desc">按描述搜索</Select.Option>
              <Select.Option value>1</Select.Option>
            </Select>
            <Input placeholder="请输入关键字" style={{width: "20%", margin: '0 10px'}} allowClear/>
            <Button type="primary"><SearchOutlined/>搜索</Button>
          </div>
         }
         extra=
          {
            <Button type="primary" onClick={this.showAdd}>
              <PlusCircleOutlined />创建商品
            </Button>
          }
        >
          <Table
            dataSource={dataSource}
            columns={columns}
            pagination={{pageSize:5}}
          />;
        </Card>
      </div>
    )
  }
}
